<template>
    <div class="my-container monitorPage">
        <el-row :gutter="20">
            <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
                <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
            </el-col>
            <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">

                <div class="container-body">
                    <el-form :inline="true" :model="queryParams" size="small">
                        <el-button style="margin: 3px 6px 0 0;" size="mini"
                            :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
                        <el-form-item label="拌和楼">
                            <el-select style="width: 160px" v-model="queryParams.stationCode" clearable size="mini"
                                placeholder="请选择拌合楼">
                                <el-option v-for="item in cementListData" :key="item.id" :label="item.name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="水稳生产配方">
                            <el-select style="width: 160px" v-model="queryParams.matchCode" clearable size="mini"
                                placeholder="请选择配方编号" @change="matchCodeChange">
                                <el-option v-for="item in quListData" :key="item.id" :label="item.matchCode"
                                    :value="item.matchCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="出料时间">
                            <deatetime ref="deatetime" v-model="queryParams.timeRange"> </deatetime>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table v-loading="loading" :data="dataList" show-overflow-tooltip="true" border size="mini"
                        highlight-current-row stripe>
                        <el-table-column label="拌和楼名称" align="center" prop="stationName" min-width="160" />
                        <el-table-column label="出料时间" align="center" prop="dischargeTime" width="160px" />
                        <el-table-column label="类型" align="center">
                            <template>
                                <div>实际用量</div>
                                <div>实际占比</div>
                                <div>理论占比</div>
                                <div>误差</div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colControl.gravel1.show" prop="gravel1Act" key="gravel1Act"
                            :label="colControl.gravel1.name">
                            <template slot-scope="scope">
                                <div class="numberRow">
                                    {{ scope.row.gravel1Act | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel1RatioAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel1RatioTheo | showNumber }}
                                </div>
                                <div class="numberRow" :class="{ level3: 1 == scope.row.gravel1 }">
                                    {{ scope.row.gravel1RatioError | showNumber }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colControl.gravel2.show" prop="gravel2Act" key="gravel2Act"
                            :label="colControl.gravel2.name">
                            <template slot-scope="scope">
                                <div class="numberRow">
                                    {{ scope.row.gravel2Act | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel2RatioAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel2RatioTheo | showNumber }}
                                </div>
                                <div class="numberRow" :class="{ level3: 1 == scope.row.gravel2 }">
                                    {{ scope.row.gravel2RatioError | showNumber }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colControl.gravel3.show" prop="gravel3Act" key="gravel3Act"
                            :label="colControl.gravel3.name">
                            <template slot-scope="scope">
                                <div class="numberRow">
                                    {{ scope.row.gravel3Act | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel3RatioAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel3RatioTheo | showNumber }}
                                </div>
                                <div class="numberRow" :class="{ level3: 1 == scope.row.gravel3 }">
                                    {{ scope.row.gravel3RatioError | showNumber }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colControl.gravel4.show" prop="gravel4Act" key="gravel4Act"
                            :label="colControl.gravel4.name">
                            <template slot-scope="scope">
                                <div class="numberRow">
                                    {{ scope.row.gravel4Act | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel4RatioAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel4RatioTheo | showNumber }}
                                </div>
                                <div class="numberRow" :class="{ level3: 1 == scope.row.gravel4 }">
                                    {{ scope.row.gravel4RatioError | showNumber }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colControl.gravel5.show" prop="gravel5Act" key="gravel5Act"
                            :label="colControl.gravel5.name">
                            <template slot-scope="scope">
                                <div class="numberRow">
                                    {{ scope.row.gravel5Act | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel5RatioAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel5RatioTheo | showNumber }}
                                </div>
                                <div class="numberRow" :class="{ level3: 1 == scope.row.gravel5 }">
                                    {{ scope.row.gravel5RatioError | showNumber }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colControl.gravel6.show" prop="gravel6Act" key="gravel6Act"
                            :label="colControl.gravel6.name">
                            <template slot-scope="scope">
                                <div class="numberRow">
                                    {{ scope.row.gravel6Act | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel6RatioAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.gravel6RatioTheo | showNumber }}
                                </div>
                                <div class="numberRow" :class="{ level3: 1 == scope.row.gravel6 }">
                                    {{ scope.row.gravel6RatioError | showNumber }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colControl.powder1.show" prop="powder1Act" key="powder1Act"
                            :label="colControl.powder1.name">
                            <template slot-scope="scope">
                                <div class="numberRow">
                                    {{ scope.row.powder1Act | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.powder1RatioAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.powder1RatioTheo | showNumber }}
                                </div>
                                <div class="numberRow" :class="{ 'level3': 1 == scope.row.powder1 }">
                                    {{ scope.row.powder1RatioError | showNumber }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colControl.powder2.show" prop="powder2Act" key="powder2Act"
                            :label="colControl.powder2.name">
                            <template slot-scope="scope">
                                <div class="numberRow">
                                    {{ scope.row.powder2Act | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.powder2RatioAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.powder2RatioTheo | showNumber }}
                                </div>
                                <div class="numberRow" :class="{ 'level3': 1 == scope.row.powder2 }">
                                    {{ scope.row.powder2RatioError | showNumber }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="colControl.water.show" prop="waterAct" key="waterAct"
                            :label="colControl.water.name">
                            <template slot-scope="scope">
                                <div class="numberRow">
                                    {{ scope.row.waterAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.waterRatioAct | showNumber }}
                                </div>
                                <div class="numberRow">
                                    {{ scope.row.waterRatioTheo | showNumber }}
                                </div>
                                <div class="numberRow" :class="{ level3: 1 == scope.row.water }">
                                    {{ scope.row.waterRatioError | showNumber }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="处理状态" align="center" width="120px">
                            <template slot-scope="scope">
                                <span v-if="scope.row.state == 0">未处理</span>
                                <span v-if="scope.row.state == 1">已处理</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" fixed="right" width="80px">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="showHandler(scope.row.id)">处理</el-link>
                                <!-- v-if="$hasPermission('cement:alarm:handler')" -->
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
            </el-col>
        </el-row>



        <el-dialog title="超标处理" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
            :before-close="doClose" width="600px">
            <el-form ref="editForm" :model="form" :rules="rules" label-width="80px" size="small" v-loading="loadingForm">
                <el-form-item label="问题原因" prop="alarmReason">
                    <el-input type="textarea" v-model="form.alarmReason" maxlength="200" />
                </el-form-item>
                <el-form-item label="处理方案" prop="handlerPlan">
                    <el-input type="textarea" v-model="form.handlerPlan" maxlength="200" />
                </el-form-item>
                <el-form-item label="处理结果" prop="handlerResult">
                    <el-input type="textarea" v-model="form.handlerResult" maxlength="200" />
                </el-form-item>
                <el-form-item label="处理人" prop="handlerPerson">
                    <el-input v-model="form.handlerPerson" maxlength="20" />
                </el-form-item>
                <el-form-item label="处理时间" prop="handlerTime">
                    <el-date-picker v-model="form.handlerTime" :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" />
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button size="mini" @click="doClose">取消</el-button>
                <el-button type="primary" v-loading="submitting" size="mini" @click="doSubmit">
                    确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import {
    cementList,
    quList,
    pageQuality,
    getHandler,
    handlerUpdate
} from "@/api/waterStability/productionQuality/monitor";
import deatetime from "@/components/Datetime";
import workSiteLeft from "@/views/components/workSiteLeft";

export default {
    name: 'monitor',
    components: { deatetime, workSiteLeft },
    filters: {
        showNumber(value) {
            if (null == value || undefined == value) {
                return '';
            }
            return value;
        }
    },
    data() {
        return {
            show: true,
            rowObj: {
                T1: 3,
                T2: 24,
                T3: 21,
                T4: 24,
                F1: 0,
                F2: 0,
                F3: 24,
                F4: 24,
            },
            cementListData: [],
            quListData: [],
            total: 0,
            queryParams: {
                id: undefined,
                pageNum: 1,
                pageSize: 10,
                stationCode: undefined,
                matchCode: undefined,
                timeRange: [undefined, undefined]
            },
            dataList: [],
            currentMatch: null,
            // 控制显示隐藏表格列
            colControl: {
                gravel1: { show: true, name: '集料1' },
                gravel2: { show: true, name: '集料2' },
                gravel3: { show: true, name: '集料3' },
                gravel4: { show: true, name: '集料4' },
                gravel5: { show: true, name: '集料5' },
                gravel6: { show: true, name: '集料6' },
                powder1: { show: true, name: '水泥1' },
                powder2: { show: true, name: '水泥2' },
                water: { show: true, name: '水' }
            },
            // 默认表格列名称
            colNameDef: {
                gravel1: '集料1',
                gravel2: '集料2',
                gravel3: '集料3',
                gravel4: '集料4',
                gravel5: '集料5',
                gravel6: '集料6',
                powder1: '水泥1',
                powder2: '水泥2',
                water: '水'
            },
            visible: false,
            form: {},
            rules: {
                alarmReason: [{ required: true, message: '请输入问题原因', trigger: 'change' }],
                handlerPlan: [{ required: true, message: '请输入处理方案', trigger: 'change' }],
                handlerResult: [{ required: true, message: '请输入处理结果', trigger: 'change' }],
                handlerPerson: [{ required: true, message: '请选择处理人', trigger: 'change' }],
                handlerTime: [{ required: true, message: '请选择处理时间', trigger: 'change' }]
            },
            submitting: false,
            loadingForm: false,
            loading: false,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now(); //选择时间范围
                }
            }
        };
    },
    mounted() {
        this.getList();
        this.getCementList();
        this.getQuList()

    },
    methods: {
        showLeft(show) {
            this.show = !show;
        },
        queryVal(val) {
            this.queryParams.id = val.id;
            this.getList();
            // this.handleQuery();
        },
        // 查询拌合楼下拉列表
        getCementList() {
            cementList().then((res) => {
                this.cementListData = res.data || [];
            });
        },
        // 查询配方编号下拉
        getQuList() {
            quList().then((res) => {
                this.quListData = res.data || [];
            });
        },
        getList() {
            this.loading = true;
            pageQuality(this.queryParams).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
        },
        getSearchParams() {
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
        /**
         * 配方数据变化
         */
        matchCodeChange(val) {
            this.currentMatch = val;
        },

        /**
         * 获取查询条件
         */
        getSearchParams() {
            // 根据选中的配方设置表格列显示隐藏
            this.initColControl();
            // 拼接查询条件
            let params = {};
            params['stationCode'] = this.queryParams['stationCode'];
            params['matchCode'] = this.queryParams['matchCode'];
            if (!!this.queryParams.timeRange && 2 == this.queryParams.timeRange.length) {
                params['startDate'] = this.queryParams.timeRange[0];
                params['endDate'] = this.queryParams.timeRange[1];
            }
            return params;
        },

        /**
         * 设置表格控制
         */
        initColControl() {
            if (this.currentMatch == null || undefined == this.currentMatch) {
                for (const key in this.colControl) {
                    this.colControl[key].show = true;
                    this.colControl[key].name = this.colNameDef[key];
                }
            } else {
                let colName;
                for (const key in this.colControl) {
                    this.colControl[key].show = !!this.currentMatch[key];
                    colName = this.currentMatch[key + 'Name'];
                    this.colControl[key].name = !!colName ? colName : this.colNameDef[key];
                }
            }
        },

        /**
         * 显示超标处理
         */
        showHandler(id) {
            getHandler(id).then((res) => {
                this.form = res.data || {}
                this.visible = true;
            })
        },
        /* * 关闭弹窗*/
        doClose() {
            this.visible = false;
            this.submitting = false
        },
        /*** 提交表单*/
        doSubmit() {
            this.submitting = true
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    handlerUpdate(this.form).then((res) => {
                        this.$message.success('处理成功！')
                        this.doClose()
                    })
                } else {
                    this.submitting = false
                }
            });
        },
    }
};
</script>
  
<style scoped>
.monitorPage {
    padding: 16px;
}

.numberRow {
    height: 23px;
    text-align: center;
}

.level3 {
    color: red;
}

.level2 {
    color: orange;
}

.level1 {
    color: blue;
}
</style>
  

